const btnStart = document.querySelector('#btnStart')
const btnStop = document.querySelector('#btnStop')

let recorder, stream, videoStreamTrack, recordedChunks = []

let mediaConstraints = {
    audio: true,
    video: {
        mediaSource: 'screen',
        // chromeMediaSource: 'desktop',
        // mediaSource: 'desktop',
        // width: 1280,  height: 720,
        // width: 1280 * 2,  height: 720 * 2,
        width: 1920, height: 1080,
        // width: 1920 * 2,  height: 1080 * 2,
        // width: 1440,  height: 900,
        // width: 2880, height: 1800,
        // width: 2880 * 4,  height: 1800 * 4,

        frameRate: 30,
        // frameRate: 60,
        // frameRate: 120,
    },
}

let mediaOptions = {
    // // audio, video, canvas, gif
    // type: 'video',

    // audio/webm
    // audio/webm;codecs=pcm
    // video/mp4    // chrome 不支持
    // video/webm;codecs=vp9
    // video/webm;codecs=vp8
    // video/webm;codecs=h264
    // video/x-matroska;codecs=avc1
    // mimeType: 'video/webm;codecs=h264',


    // 由浏览器选择
    mimeType: 'video/webm',

    // vp9
    // mimeType: 'video/webm;codecs="vp9"',

    // mimeType: 'video/x-matroska;codecs="avc1"',

    audioBitsPerSecond: 192000,

    // videoBitsPerSecond : 2500000,

    videoBitsPerSecond: 1000000000000,
}

async function startRecording () {

    stream = await navigator.mediaDevices.getDisplayMedia(mediaConstraints)

    recorder = new MediaRecorder(stream, mediaOptions)

    recorder.addEventListener('dataavailable', (event) => {
        console.log('data-available')
        if (event.data.size > 0) {
            recordedChunks.push(event.data)
            download()
        }
    })

    videoStreamTrack = stream.getVideoTracks()[0]
    videoStreamTrack.contentHint = 'detail'

    // 监听停止录屏事件
    recorder.addEventListener('stop', () => {

        console.log('stop')

        // 移除录屏显示器上的停止工具条
        stream.getAudioTracks()[0].stop()
        stream.getVideoTracks()[0].stop()

        // 恢复按钮
        btnStart.removeAttribute('disabled')
        btnStop.setAttribute('disabled', true)
    })

    recorder.addEventListener('error', (event) => {
        console.error(`error recording stream: ${event.error.name}`)
    })

    recorder.start()
}

// 下载视频
function download () {
    var blob = new Blob(recordedChunks, {
        type: 'video/webm',
    })
    var url = URL.createObjectURL(blob)
    var a = document.createElement('a')
    document.body.appendChild(a)
    a.style = 'display: none'
    a.href = url
    var dateStr = moment().format('YYYY-MM-DD HH:mm:ss')
    a.download = `${mediaConstraints.video.width}x${mediaConstraints.video.height}-${mediaConstraints.video.frameRate}fps-${dateStr}.webm`
    a.click()
    window.URL.revokeObjectURL(url)
}

// 开始录屏
btnStart.addEventListener('click', () => {

    mediaConstraints.video = {
        ...mediaConstraints.video,
        width: parseInt(document.querySelector('input[name="video_width"]').value),
        height: parseInt(document.querySelector('input[name="video_height"]').value),
        frameRate: parseInt(document.querySelector('input[name="video_frame_rate"]').value),
    }

    startRecording()

    btnStart.setAttribute('disabled', true)
    btnStop.removeAttribute('disabled')
})

// 停止录屏
btnStop.addEventListener('click', () => {
    recorder.stop()
})

